<template>
  <t-adaptive-page :opts="opts" @submit="conditionEnter" isCopy :table="state.table" :columns="state.table.columns"
    @selection-change="selectionChange" @size-change="handlesSizeChange" @page-change="handlesCurrentChange"
    show-summary :summary-method="getSummaries">
    <template #operName="{ scope }">{{ scope.row.operName }}</template>
  </t-adaptive-page>
</template>

<script setup lang="tsx" name="Portal">
import tableData from "./tableData.json"

const state: any = reactive({
  queryData: {
    invoiceCode: null, // 发票代码
    businessType: null, // 业务类型
    invoiceStatus: null, // 发票状态
    invoiceType: null, // 发票类型
    ticketType: null, // 种类票种
    certificationStatus: null, // 认证状态
    invoiceDate: null, // 开票日期
    certificationDate: null, // 认证日期
    totalTaxPrice: null, // 价税合计
    department: null, // 部门
    project: null, // 项目
    documentStatus: null // 单据状态
  },
  table: {
    currentPage: 1,
    pageSize: 20,
    total: 0,
    firstColumn: [{ type: "selection", fixed: true }, { type: "index", label: "序列", fixed: true }],
    // 接口返回数据
    data: [],
    // 表头数据
    columns: [
      {
        prop: "codeNum",
        label: "发票号码",
        minWidth: 130,
        fixed: false,
        sort: true,
        renderHeader: (row: any) => {
          return (
            <span class="label-title">
              <span class="label">{row.label}</span>
              <div class="caret-wrapper arrow">
                <el-icon
                  style={{ color: row.fixed ? "#1890ff" : "#888888" }}
                  onClick={(event:any) => {
                    handleClick(row);
                    event.stopPropagation();
                  }}
                >
                  {row.fixed ? <Lock /> : <Unlock />}
                </el-icon>
              </div>
            </span>
          )
        }
      },
      { prop: "name", label: "客户名称", minWidth: 210 },
      { prop: "category", label: "发票种类", minWidth: 90 },
      { prop: "purchaser-name", label: "购买方名称", minWidth: 210 },
      { prop: "kind", label: "发票类型", minWidth: 130 },
      { prop: "status", label: "发票状态", minWidth: 90 },
      { prop: "date", label: "开票日期", minWidth: 130, fixed: false },
      { prop: "sum", label: "金额", minWidth: 130 },
      { prop: "tax-rate", label: "税率", minWidth: 90 },
      { prop: "tax", label: "税额", minWidth: 130 },
      { prop: "total", label: "价税合计", minWidth: 130 },
      { prop: "replace", label: "税局代开", minWidth: 130 },
      { prop: "shipping-number", label: "出货单号", minWidth: 130 },
      { prop: "outbound-status", label: "出库成本状态", minWidth: 130 },
      { prop: "warehouse-warrant", label: "产成品入库单", minWidth: 130 },
      { prop: "invoice-source", label: "发票来源", minWidth: 130 },
      { prop: "acquisition-mode", label: "采集方式", minWidth: 130 },
      { prop: "electronic-invoice", label: "电子发票", minWidth: 130 },
      { prop: "notes", label: "备注", minWidth: 130 }
    ]
  },
  selectTable1: {
    data: [
      { id: 1, num: 1, code: 1001, name: "库存现金", loan: "借", type: "资产" },
      { id: 2, num: 2, code: 1002, name: "银行存款", loan: "借", type: "资产" },
      { id: 3, num: 3, code: 1003, name: "其他货币资金", loan: "借", type: "资产" },
      { id: 4, num: 4, code: 1004, name: "短期投资", loan: "借", type: "资产" }
    ],
    columns: [
      { label: "序号", width: "60px", prop: "num" },
      { label: "科目编码", width: "80px", prop: "code" },
      { label: "科目名称", width: "200px", prop: "name" },
      { label: "方向", width: "60px", prop: "loan" },
      { label: "科目类别", width: "80px", prop: "type" }
    ]
  },
  listTypeInfo: {
    invoiceStatus: [
      { label: "销项税发票", key: "W1" },
      { label: "进项税发票", key: "W2" }
    ]
  }
})

const opts = computed(() => {
  return {
    invoiceCode: {
      label: "发票代码",
      comp: "el-input"
    },
    businessType: {
      label: "业务类型",
      comp: "t-select-table",
      isSelfCom: true,
      bind: {
        isKeyup: true,
        maxHeight: 400,
        keywords: { label: "name", value: "id" },
        isShowFirstColumn: false,
        table: state.selectTable1,
        columns: state.selectTable1.columns,
        "show-summary": false
      },
      eventHandle: {
        radioChange: (val: any) => radioChange(val)
      }
    },
    invoiceStatus: {
      label: "发票状态",
      comp: "t-select",
      isSelfCom: true,
      bind: {
        optionSource: state.listTypeInfo.invoiceStatus
      }
    },
    invoiceType: {
      label: "发票种类",
      comp: "t-select",
      isSelfCom: true,
      bind: {
        optionSource: state.listTypeInfo.invoiceStatus
      }
    },
    ticketType: {
      label: "种类票种",
      comp: "t-select",
      defaultVal: "W1",
      isSelfCom: true,
      bind: {
        optionSource: state.listTypeInfo.invoiceStatus
      }
    },
    certificationStatus: {
      label: "认证状态",
      comp: "t-select",
      isSelfCom: true,
      bind: {
        optionSource: state.listTypeInfo.invoiceStatus
      }
    },
    invoiceDate: {
      label: "开票日期",
      comp: "t-date-picker",
      span: 2,
      bind: {
        type: "daterange"
      }
    },
    certificationDate: {
      label: "认证日期",
      comp: "t-date-picker",
      span: 2,
      bind: {
        type: "daterange"
      }
    },
    totalTaxPrice: {
      label: "税价合计",
      comp: "el-input"
    },
    department: {
      label: "部门",
      comp: "el-input"
    },
    project: {
      label: "项目",
      comp: "el-input"
    },
    documentStatus: {
      label: "单据状态",
      comp: "t-select",
      defaultVal: "W1",
      isSelfCom: true,
      bind: {
        optionSource: state.listTypeInfo.invoiceStatus
      }
    },
  }
})
const radioChange = (row: any) => {
  console.log("下拉选择表格-单选", row.name)
  state.queryData.businessType = row.name
}
// 最终参数获取
const getQueryData = computed(() => {
  const { invoiceCode, businessType, invoiceStatus, invoiceType, ticketType, certificationStatus, invoiceDate, certificationDate, totalTaxPrice, department, project, documentStatus } = toRefs(state.queryData)
  return {
    invoiceCode: invoiceCode.value,
    businessType: businessType.value,
    invoiceStatus: invoiceStatus.value,
    invoiceType: invoiceType.value,
    ticketType: ticketType.value,
    certificationStatus: certificationStatus.value,
    invoiceBeginDate: invoiceDate.value && invoiceDate.value[0] ? invoiceDate.value[0] : null,
    invoiceEndDate: invoiceDate.value && invoiceDate.value[1] ? invoiceDate.value[1] : null,
    certificationBeginDate: certificationDate.value && certificationDate.value[0] ? certificationDate.value[0] : null,
    certificationEndDate: certificationDate.value && certificationDate.value[1] ? certificationDate.value[1] : null,
    totalTaxPrice: totalTaxPrice.value,
    department: department.value,
    project: project.value,
    documentStatus: documentStatus.value,
    pageNum: state.table.currentPage,
    pageSize: state.table.pageSize
  };
})
// 点击表头固定按钮
function handleClick(row: any) {
  row.fixed = !row.fixed
}
// 点击查询按钮
const conditionEnter = (data: any) => {
  state.queryData = data
  console.log("最终参数", getQueryData.value)
  getData()
}
// 复选框选中
const selectionChange = (data: any[]) => {
  console.log("复选框选中", data)
  state.ids = data.map((item: { operId: any }) => item.operId)
}
// 页面大小
const handlesSizeChange = (val: any) => {
  state.table.pageSize = val
  getData()
}
// 页码
const handlesCurrentChange = (val: any) => {
  state.table.currentPage = val
  getData()
}
// 获取表格数据
const getData = async () => {
  let res = await tableData
  if (res.success) {
    state.table.data = res.table.data.slice((state.table.currentPage - 1) * state.table.pageSize, state.table.pageSize * state.table.currentPage)
    state.table.total = res.table.data.length
  }
}

const getSummaries = (param: any) => {
  console.log('param', param)
  const { columns, data } = param
  const res = tableData
  const sums: any[] = [];
  columns.forEach((column: any, index: any) => {
    if (index === 0) {
      sums[index] = "总价";
      return;
    }
    const values = res.table.data.map((item: any) => Number(item[column.property]))
    if (
      column.property === "sum" ||
      column.property === "tax" ||
      column.property === "total"
    ) {
      const totalValue = values.reduce((prev, curr) => {
        const value = Number(curr);
        if (!isNaN(value)) {
          return prev + value;
        } else {
          return prev;
        }
      }, 0);
      sums[index] = totalValue
        .toFixed(2)
        .toString()
        .replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, "$&,")
    } else {
      sums[index] = ""
    }
  });
  return sums
}

onMounted(() => {
  getData()
})
</script>